@charset "utf-8";

@use "sass:math";

////
/// 辅助编写样式效果的工具方法
/// @author Kayo
/// @group 样式特效
/// @date 2015-08-23
////

/// 产生正方形的宽高
///
/// @name square
/// @param {Measure} $length - 宽高的长度
@mixin square($length) {
    width: $length;
    height: $length;
}

/// 利用 absolute 把指定元素水平垂直居中布局，适用于已知元素宽高的情况下
///
/// @name absoluteCenter
/// @param {Measure} $width - 元素的宽度
/// @param {Measure} $height - 元素的高度
@mixin absoluteCenter($width, $height) {
    position: absolute;
    left: 50%;
    top: 50%;
    margin: math.div(-$height, 2) 0 0 math.div(-$width, 2);
}

%triangleCommonStyle {
    display: block;
    content: " ";
    width: 0;
    line-height: 0;
    font-size: 0;
    border-style: solid;
    border-color: transparent;
}

/// CSS Border 三角形
///
/// @name triangle
/// @param {Measure} $width - 三角形的底边的宽
/// @param {Measure} $height - 三角形的高
/// @param {String} $direction - 三角形的方向（即与底边相对的顶点指向的方向）
/// @param {Color} $borderColor - 三角形的边框色
/// @throw 由于方法内包含了有 $width / 2 的计算，因此如果 $width 的值为奇数，则实际上计算出的三角形会偏小，建议 $width 不要使用奇数。
@mixin triangle($width, $height, $direction, $borderColor) {
    @extend %triangleCommonStyle;
    /* 向上小三角 */
    @if $direction == top {
        border-width: $height math.div($width, 2);
        border-top: 0;
        border-bottom-color: $borderColor;
    }
    /* 向下小三角 */
    @else if $direction == bottom {
        border-width: $height math.div($width, 2);
        border-bottom: 0;
        border-top-color: $borderColor;
    }
    /* 向左小三角 */
    @else if $direction == left {
        border-width: math.div($width, 2) $height;
        border-left: 0;
        border-right-color: $borderColor;
    }
    /* 向右小三角 */
    @else if $direction == right {
        border-width: math.div($width, 2) $height;
        border-right: 0;
        border-left-color: $borderColor;
    }
}

/// 用以生成十字架图标
///
/// @name cross
/// @param {Measure} $crossLength [26px] - 十字架的大小
/// @param {Measure} $crossLineThickness [2px] - 十字架线条的粗细
/// @param {Color} $crossLineColor [#2685d2] - 十字架的颜色
@mixin cross($crossLength: 26px, $crossLineThickness: 2px, $crossLineColor: $common_color_link) {
    position: relative;
    @include square($crossLength);
    &:before,
    &:after {
        content: "";
        font-size: 0;
        line-height: 0;
        position: absolute;
        background-color: $crossLineColor;
    }
    &:before {
        left: getLengthMaxIntegerCenter($crossLength, $crossLineThickness);
        top: 0;
        width: $crossLineThickness;
        height: 100%;
    }
    &:after {
        left: 0;
        top: getLengthMaxIntegerCenter($crossLength, $crossLineThickness);
        width: 100%;
        height: $crossLineThickness;
    }
}

/// 使得指定的元素产生 Block Formatting Contexts 或 hasLayout
///
/// @name bfc
@mixin bfc {
    overflow: hidden;
    zoom: 1;
}

// borderStyleForOnePixel 是 onePixelBorder 内部使用的方法
@mixin borderStyleForOnePixel($direction: all, $color:#dedede) {
    border-style: solid;
    border-color: $color;
    @if $direction == all {
        border-width: 1px;
    } @else if $direction == top {
        border-width: 1px 0 0 0;
    } @else if $direction == bottom {
        border-width: 0 0 1px 0;
    } @else if $direction == left {
        border-width: 0 0 0 1px;
    } @else if $direction == right {
        border-width: 0 1px 0 0;
    } @else if $direction == horizontal {
        border-width: 0 1px;
    } @else if $direction == vertical {
        border-width: 1px 0;
    } @else if $direction == none {
        border-width: 0;
    }
}

/// 在移动设备上生成 1px 宽的边框，direction 支持 all, top, bottom, left, right, horizontal, vertical, none 8个 direction 值，position 支持 outside 和 inside 两个值
///
/// @name onePixelBorder
/// @param {String} $direction [all] - 边框的方向，支持 all（所有方向），top（上边框），right（右边框），bottom（下边框），left（左边框），horizontal（左右边框），vertical（上下边框），none（无边框）
/// @param {Color} $color - 边框的颜色
/// @param {String} $position [outside] - 边框的位置，支持 outside 和 inside
/// @param {Number} $borderRadius [0] - 边框的圆角
/// @param {Number} $offset 水平缩进值
/// @throw 在多倍屏下，本方法会利用元素的 ::after 做效果，因此需要注意使用了该方法后 ::after 则尽量避免添加样式，以免影响效果
@mixin onePixelBorder($direction: all, $color: $common_color_border, $position: outside, $borderRadius: 0, $borderStyle: solid, $offset: 0) {
    @include borderStyleForOnePixel($direction, $color);
    border-radius: $borderRadius;
    border-style: $borderStyle;
    @include screenResolution(2) {
        position: relative;
        border: 0;
        &:after {
            content: "";
            position: absolute;
            top: 0;
            left: $offset;
            @if $offset == 0 {
                width: 200%;
            } @else {
                width: calc(200% - #{$offset * 2 * 2});
            }
            height: 200%;
            border-radius: $borderRadius * 2;
            @include borderStyleForOnePixel($direction, $color);
            border-style: $borderStyle;
            transform: scale(.5);
            transform-origin: 0 0;
            @if $position == inside {
                box-sizing: border-box;
            }
            pointer-events: none;
        }
    }
    @include screenResolution(3) {
        &:after {
            @if $offset == 0 {
                width: 300%;
            } @else {
                width: calc(300% - #{$offset * 3 * 2});
            }
            height: 300%;
            border-radius: $borderRadius * 3;
            transform: scale(math.div(1, 3));
        }
    }
}
